// -------------------------获取类别-------------------------

function renderCategory() {
    $.ajax({
        type: 'GET',
        url: '/my/category/list',
        success: function (res) {
            // console.log(res);
            layer.msg(res.message)
            if (res.status === 0) {
                let arr = [];
                res.data.forEach(item => {
                    arr.push(`<tr>
                    <td>${item.name}</td>
                    <td>${item.alias}</td>
                    <td>
                        <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
                        <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>`);
                });
                $('tbody').html(arr.join(''))
            }
        }
    });
}
renderCategory();

// -------------------------删除分类-------------------------

$('tbody').on('click', 'button:contains("删除")', function () {
    // 获取id
    let id = $(this).data('id');
    // 询问是否删除
    layer.confirm('确定要删除吗', function (index) {
        $.ajax({
            url: '/my/category/delete',
            data: {
                id: id
            },
            success: function (res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    renderCategory();
                }
            }
        })
    })
})

// -------------------------添加分类-------------------------

// 1. 点击添加实现弹层
let addIndex;
$('button:contains("添加类别")').on('click', function () {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(),
        area: ['500px', '250px']
    })
})

// 2. 提交表单事件,完成添加
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault();
    // serialize没有图片上传使用
    // formDate如果没有图片上传，一般都不使用FormData
    let data = $(this).serialize();

    $.ajax({
        type: 'POST',
        url: '/my/category/add',
        data: data,
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(addIndex)
            }
        }
    })
})

// ----------------------编辑-------------------------

// 点击显示弹层
let editIndex;
$('body').on('click', 'button:contains("编辑")', function () {
    // 获取button的自定义属性
    let shuju = $(this).data();
    // console.log(shuju.name);

    editIndex = layer.open({
        type: 1,
        title: '编辑分类',
        content: $('#tpl-edit').html(),
        area: ['500px', '250px'],

        success: function () {

            $('#edit-form input[name="name"]').val(shuju.name);
            $('#edit-form input[name="alias"]').val(shuju.alias);
            $('#edit-form input[name="id"]').val(shuju.id);
        }
    })
})

// 提交表单完成编辑
$('body').on('submit', '#edit-form', function (e) {
   e.preventDefault();
    
    let data = $(this).serializeArray();
    console.log(data);
    $.ajax({
        type: 'POST',
        data: data,
        url: '/my/category/update',
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(editIndex)
            }
        },

    })
})